<template>
	<view>
		<view>
			<view class="boom-header">
				<view class="header-leftlogo" @click="scan"><view class="header-logopng"></view></view>
				<view class="header-words">首页</view>
				<view class="header-rightlogo"><!-- <view class="index-rightpic"><view class="red-bs"></view></view> --></view>
			</view>
			<view>
				<view class="index-top">
					<view class="top-left">今日值班</view>
					<navigator class="top-right" url="../../personal/succeed/succeed">一键交班</navigator>
				</view>

				<swiper :indicator-dots="true" :autoplay="true" :interval="3000000" :duration="1000">
					<swiper-item v-for="(item, index) in wheelsData" :key="index">
						<view class="swiper-item">
							<navigator class="index-view" url="../../project-maintenance/duty-manage/duty-detail">
								<view class="view-option">
									<view class="view-logo">
										<view class="logo-small"><image src="../../../static/images/class.png" mode=""></image></view>
									</view>
									<view class="view-right">
										<view class="right-day">{{ item.week }}</view>
										<view class="day-words">{{ item.dates }}</view>
									</view>
									<view class="index-container">
										<view class="left-container">
											<view class="left-left">
												<view class="left-leader">值班领导：</view>
												<view class="left-name">{{ item.leader }}</view>
											</view>
											<view class="left-right">
												<view class="left-leader">值班地点：</view>
												<view class="left-name">{{ item.leadRoom }}</view>
											</view>
										</view>
										<view class="left-container" v-for="member in item.dutyPerson" :key="member.childrenName">
											<view class="left-left">
												<view class="left-leader bottom-container">值班人员：</view>
												<view class="left-name bottom-container">{{ member.childrenName }}</view>
											</view>
											<view class="left-right">
												<view class="left-leader bottom-container">值班地点：</view>
												<view class="left-name bottom-container">{{ member.childrenRoom }}</view>
											</view>
										</view>
									</view>
								</view>
							</navigator>
						</view>
					</swiper-item>
				</swiper>
				<view class="index-choose">
					<view class="choose-option" v-for="(item, index) in taskNum" :key="index">
						<view class="option-small">{{ item.name }}</view>
						<view class="option-big">{{ item.num }}</view>
						<view class="right-zero"></view>
						<view class="right-pic" v-if="item.name == '今日待完成'"><image src="../../../static/images/wait.png" mode=""></image></view>
						<view class="right-pic" v-if="item.name == '本周已完成'"><image src="../../../static/images/sure.png" mode=""></image></view>
						<view class="right-pic" v-if="item.name == '本周未完成'"><image src="../../../static/images/history.png" mode=""></image></view>
					</view>
				</view>
				<view>
					<view class="index-top">
						<view class="top-left">
							<view>待处理任务</view>
							<view class="five-misson"><uni-badge :text="undisposedNum" type="error" /></view>
						</view>
						<!-- <view class="center-right">查看全部</view> -->
					</view>
					<view class="index-list">
						<view class="index-option" v-for="(item, index) in listData" :key="index">
							<view class="option-container">
								<!--任务优先级 -->
								<view class="container_index" :class="item.priorityLevel == '001' ? 'active1' : item.priorityLevel == '002' ? 'active2' : 'active3'"></view>
								<view class="index_bottomwords">{{ item.equipmentRowGuid }}</view>
								<view class="index-pic">
									<!--任务状态  003 已完成 002 已接收 001 待接收-->
									<image
										:src="
											item.status == '001'
												? '../../../static/images/reddjs.png'
												: item.status == '002'
												? '../../../static/images/blueyjs.png'
												: '../../../static/images/greenbj.png'
										"
										mode=""
									></image>
								</view>
							</view>
							<!-- <view class="option_index-words">......| dateFormat</view> -->
							<view class="open-bottom-words">{{ item.createTime }}</view>
							<view class="opem-choose">
								<navigator
									class="opem-choosetwo"
									:url="
										'../maintenance-manage/maintenance-manage-detail?id=' +
											listData[index].id +
											'&system=' +
											listData[index].equipmentRowGuid +
											'&status=' +
											item.status
									"
								>
									查看详情
								</navigator>
								<view class="opem-chooseone" v-show="item.status == '001'" @click="receiveTask(listData[index])">接收</view>
							</view>
						</view>
					</view>

					<!--3使用组件-->
					<uni-load-more :status="loadingType" :contentText="contentText"></uni-load-more>
				</view>
			</view>
		</view>
		<!-- <web-view :webview-styles="webviewStyles" v-if="webSrc != ''" :src="webSrc"></web-view> -->
	</view>
</template>

<script>
import uniBadge from '@/components/uni-badge/uni-badge.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniIcon from '@/components/uni-icon/uni-icon.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import permision from '@/common/permission.js';
export default {
	data() {
		return {
			// webSrc: '',
			title: 'scanCode',
			result: '',
			listParam: {
				parameter: 'status',
				operators: '6',
				queryValue: '003',
				pageSize: 8,
				pageIndex: 1,
				orderBy: '',
				orderByType: ''
			},
			wheelsData: [],
			taskNum: [],
			newTasks: [], //待处理任务
			/*数据集合
			 */
			listData: [], //待处理任务
			/*
			 *定义加载方式  'more'---contentdown  'loading'---contentrefresh 'datas'---contentnomore
			 */
			loadingType: 'more',
			/*
			 *加载方式文字提示
			 */
			contentText: {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: '没有更多数据了'
			},
			objData: [], //所有待处理对象
			undisposedNum: 0,
			path: ''
		};
	},
	components: {
		uniBadge,
		uniNavBar,
		uniIcon,
		uniLoadMore
	},
	methods: {
		//首页值班轮播
		getWheels() {
			this.$api.MaintenanceTask.GetDutyWheels()
				.then(res => {
					// 获得数据
					this.wheelsData = res[1].data.result;
				})
				.catch(res => {
					// 失败进行的操作
					console.log(res);
				});

			this.$api.MaintenanceTask.GetTaskStatusNum()
				.then(res => {
					// 获得数据
					this.taskNum = res[1].data.result;
				})
				.catch(res => {
					// 失败进行的操作
				});
		},

		//待处理任务
		getTask() {
			this.newTasks = [];
			this.$api.MaintenanceTask.ShowData(this.listParam).then(res => {
				console.log(res[1].data.result);
				res[1].data.result.items.forEach(e => {
					if (e.status != '003') {
						this.newTasks.push(e);
					}
				});
			});
		},

		/*调用接口 demo 初始化加载*/
		getDataList() {
			//显示加载动画
			this.loadingType = 'more';
			uni.showNavigationBarLoading();
			this.$api.MaintenanceTask.ShowData(this.listParam)
				.then(res => {
					let list = res[1].data.result.items;
					this.undisposedNum = res[1].data.result.totalCount;
					if (list.length == 0) {
						this.listData = [];
						this.loadingType = 'datas';
						//关闭加载动画
						uni.hideNavigationBarLoading();
						return false;
					}
					list.forEach(ele => {
						this.objData.forEach(e => {
							if (ele.equipmentRowGuid == e.ojbectId) {
								ele.equipmentRowGuid = e.ojbectName;
							}
						});
						ele.createTime = this.$helper.dateFormat(ele.createTime, false);
					});
					this.listData = list;

					//关闭动画
					uni.hideNavigationBarLoading();
					//得到数据后停止刷新
					uni.stopPullDownRefresh();
				})
				.catch(res => {
					// 失败进行的操作/给出提示
					uni.showToast({
						title: '失败进行的操作',
						duration: 2000
					});
				});
		},

		/*第二次调用 demo 加载更多*/
		getMoreDataList() {
			this.listParam.pageIndex++;
			if (this.loadingType != 'more') {
				return false;
			}
			this.loadingType = 'loading';
			//显示加载动画
			uni.showNavigationBarLoading();
			//请求接口
			this.$api.MaintenanceTask.ShowData(this.listParam)
				.then(res => {
					if (this.listData.length == res[1].data.result.totalCount) {
						this.loadingType = 'datas';
						//关闭加载动画
						uni.hideNavigationBarLoading();
						return false;
					}
					this.listData = this.listData.concat(res[1].data.result.items);
					this.listData.forEach(ele => {
						this.objData.forEach(e => {
							if (ele.equipmentRowGuid == e.ojbectId) {
								ele.equipmentRowGuid = e.ojbectName;
								this.eqId = ele.id;
							}
						});
					});
					//将loadingType归more重置
					this.loadingType = 'more';
					//关闭加载动画
					uni.hideNavigationBarLoading();
				})
				.catch(res => {
					// 失败进行的操作/给出提示
					uni.showToast({
						title: '接口数据请求失败',
						duration: 2000
					});
				});
		},

		async scan() {
			let status = await this.checkPermission();
			if (status !== 1) {
				return;
			}
			uni.scanCode({
				//扫码类型 二维码
				scanType: 'qrCode',
				success: res => {
					console.log(res);
					this.result = res.result;
					console.log(this.result);
					console.log(res.scanType);
					uni.navigateTo({
						url: '../../project-archive/equipment/equipment-detail?id=' + this.result
					})
					uni.showToast({
						title: '设备信息',
						content: this.result,
						showCancel: false,
						confirmText: '确定'
					});
				},
				fail: err => {
					console.log(err);
					unis.uni.showToast({
						title: '扫描失败'
					});
				}
			});
		},

		async checkPermission(code) {
			let status = permision.isIOS ? await permision.requestIOS('camera') : await permision.requestAndroid('android.permission.CAMERA');
			if (status === null || status === 1) {
				status = 1;
			} else {
				uni.showModal({
					content: '需要相机权限',
					confirmText: '设置',
					success: function(res) {
						permision.gotoAppSetting();
					}
				});
			}
			return status;
		},

		//接收任务
		receiveTask(data) {
			let param = {
				id: data.id,
				state: '002'
			};
			this.$api.MaintenanceTask.ReciveTask(param)
				.then(res => {
					if (res[1].data.success) {
						uni.showToast({
							title: '接收成功',
							duration: 2000
						});
						this.getDataList();
					}
				})
				.catch(res => {
					// 失败进行的操作/给出提示
					uni.showToast({
						title: '接收失败',
						duration: 2000
					});
				});
		}
	},
	onLoad: async function() {
		await this.getWheels();
		//获取所有对象
		await this.$api.MaintenanceTask.GetObjectName()
			.then(res => {
				this.objData = res[1].data.result;
			})
			.catch(res => {
				uni.showToast({
					title: '处理对象获取失败',
					duration: 2000
				});
			});
		this.getDataList();
	},
	/**
	 * 下拉刷新请求的一次数据
	 *
	 */

	onPullDownRefresh: function() {
		this.listParam.pageIndex = 1;
		this.getDataList();
	},

	/**
	 * 触底的时候请求数据，即为上拉加载更多
	 * */
	onReachBottom: function() {
		var timer = null;
		var _this = this;
		if (timer != null) {
			clearTimeout(timer);
		}
		timer = setTimeout(function() {
			_this.getMoreDataList();
		}, 1000);
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #f2f2f2;
}

.index-top {
	width: 94%;
	height: 40px;
	margin: 0 auto;
	margin-top: 16px;
}

.index-top .top-left {
	font-size: 17px;
	color: #222222;
	float: left;
	line-height: 30px;
	position: relative;
}

.top-left .five-misson {
	width: 17px;
	height: 13px;
	color: #ffffff;
	font-size: 11px;
	text-align: center;
	line-height: 13px;
	position: absolute;
	right: -17px;
	top: -1px;
}

.index-top .top-right {
	height: 33px;
	background: #458cd0;
	border-radius: 3px;
	font-size: 14px;
	color: #f2f2f2;
	line-height: 33px;
	text-align: center;
	float: right;
	padding: 0px 10px;
}

.index-top .center-right {
	font-size: 14px;
	color: #888888;
	line-height: 26px;
	float: right;
}

.index-view {
	width: 100%;
	height: 250px;
	/* margin-top: 9px; */
}

swiper {
	height: 250px;
}

.index-view .view-option {
	width: 94%;
	height: 100%;
	background: #ffffff;
	border-radius: 3px;
	margin: 0 auto;
	position: relative;
}

.view-option .view-logo {
	width: 52px;
	height: 52px;
	border: 3px solid #b2c2d1;
	background-color: #345d85;
	border-radius: 50%;
	position: absolute;
	top: 20px;
	left: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.view-logo .logo-small {
	width: 31px;
	height: 31px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.view-logo .logo-small image {
	max-width: 100%;
	max-height: 100%;
}

.view-option .view-right {
	position: absolute;
	top: 16px;
	left: 86px;
	padding: 10px;
}

.view-right .right-day {
	font-size: 18px;
	color: #333333;
}

.view-right .day-words {
	font-size: 13px;
	color: #999999;
	margin-top: 3px;
}

.index-container {
	width: 80%;
	position: absolute;
	left: 20px;
	top: 100px;
}

.index-container .left-container {
	font-size: 16px;
	overflow: hidden;
}

.left-leader {
	width: 86px;
	text-align: left;
}

.left-name {
	width: 180px;
}

.left-left .left-leader,
.left-left .left-name,
.left-container .left-left,
.left-right .left-leader,
.left-right .left-name {
	float: left;
}

.left-container .left-right {
	float: right;
}

.left-left .bottom-container,
.left-right .bottom-container {
	margin-top: 5px;
}

.index-choose {
	width: 94%;
	height: 90px;
	margin: 0 auto;
	margin-top: 10px;
	display: flex;
	justify-content: space-between;
}

.index-choose .choose-option {
	width: 30%;
	height: 100%;
	background-color: #ffffff;
	position: relative;
	border-radius: 3px;
}

.choose-option .option-small {
	font-size: 16px;
	color: #888888;
	text-align: center;
	position: absolute;
	top: 12px;
	left: 15%;
}

.choose-option .option-big {
	font-size: 23px;
	color: #444444;
	position: absolute;
	top: 40px;
	left: 15%;
}

.choose-option .right-zero {
	width: 36px;
	height: 36px;
	border-radius: 33px 0 0 0;
	background: #fff9ef;
	position: absolute;
	right: 0;
	bottom: 0;
}

.choose-option .right-pic {
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 5px;
	bottom: 6px;
}

.choose-option .right-pic image {
	max-width: 100%;
	max-height: 100%;
}

.index-list {
	width: 94%;
	margin: 0 auto;
	margin-bottom: 10px;
}

.index-list .index-option {
	width: 100%;
	background-color: #ffffff;
	margin: 0 auto;
	margin-top: 10px;
	border-radius: 3px;
}

.option-container {
	overflow: hidden;
	padding: 10px;
}

.container_index {
	width: 10px;
	height: 10px;
	background-color: #e75f5f;
	border-radius: 50%;
	float: left;
	margin: 6px;
}

.new-zeracolor {
	background-color: #ff9900;
}

.index_bottomwords {
	font-size: 16px;
	color: #333333;
	float: left;
}

.index-pic {
	width: 50px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	float: right;
	margin-top: 1.3px;
}

.index-pic image {
	max-width: 96%;
	max-height: 100%;
}

.option_index-words {
	font-size: 15px;
	color: #999999;
	padding-left: 15px;
}

.open-bottom-words {
	font-size: 15px;
	color: #999999;
	padding-left: 15px;
	padding-top: 10px;
}

.opem-choose {
	width: 100%;
	height: 26px;
	margin-top: 12px;
	padding-bottom: 16px;
}

.opem-chooseone {
	height: 30px;
	background: #458cd0;
	color: #ffffff;
	text-align: center;
	line-height: 30px;
	font-size: 12px;
	border-radius: 3px;
	float: right;
	margin-right: 8px;
	padding: 0px 24px;
}

.opem-choosetwo {
	height: 30px;
	border: 1px solid #458cd0;
	color: #458cd0;
	font-size: 12px;
	text-align: center;
	line-height: 30px;
	float: right;
	border-radius: 3px;
	margin-right: 10px;
	padding: 0px 10px;
}

.option-one .two-pic {
	background: #ffebcc;
}

.option-one .three-pic {
	background: #d3f2f9;
}

.one-pic .pic-option {
	width: 16px;
	height: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.one-pic .pic-option image {
	max-width: 100%;
	max-height: 100%;
}

.bottom-tab {
	width: 100%;
	height: 49px;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
}

.uni-badge {
	padding: 2px 8px;
	float: right;
}

.uni-badge-error {
	background-color: #ff6c68;
}

.example-body {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	overflow: hidden;
	z-index: 2;
}

.uni-navbar--shadow {
	box-shadow: inherit;
	-webkit-box-shadow: inherit;
	padding-top: 30px;
}

.uni-navbar__header-btns {
	display: none;
}

.uni-flex {
	display: flex;
}

.flex-item {
	width: 33.3%;
	text-align: center;
	padding-right: 10px;
}

.flex-left {
	text-align: left;
	padding-left: 11px;
}

.flex-right {
	text-align: right;
	/* padding-right: 4%; */
	position: relative;
}

/* .index-rightpic {
	width: 20px;
	height: 44px;
	background: url(../../../static/images/ld_index.png) no-repeat center;
	background-size: 92% 50%;
	position: absolute;
	right: 0;
}

.red-bs {
	width: 5px;
	height: 5px;
	background-color: #fc3c53;
	border-radius: 50%;
	position: absolute;
	right: 0px;
	top: 12px;
} */

.boom-header {
	width: 100%;
	height: 44px;
	background: #003466;
	color: #ffffff;
	display: flex;
	justify-content: center;
	padding-top: 30px;
}

.header-words {
	width: 54%;
	height: 100%;
	font-size: 20px;
	text-align: center;
	line-height: 44px;
}

.header-leftlogo {
	width: 20%;
	height: 100%;
}

.header-rightlogo {
	width: 20%;
	height: 100%;
	position: relative;
}

.header-logopng {
	width: 26px;
	height: 44px;
	background: url(../../../static/images/scraning.png) no-repeat center;
	background-size: 92% 42%;
}
</style>
